<template>
  <div class='news first-box'>
    <div class="tab-box">
      <Tab :listData="tabData" :selected="selectedIndex" :className="{padding80:true}"></Tab>
    </div>

    <p class="title"><span>消息列表</span><span class="fr btn-active">一键清空</span></p>

    <Scroll :hasmore="hasmore" :pullup="pullup" setHeight="-85">
      <List :data="listData"></List>
    </Scroll>
  </div>
</template>
<script>
import Tab from '../../common/tab'
import Scroll from '../../common/scroller'
import List from './list'
export default {
  components: {Tab,Scroll,List},
  name: "",
  data() {
    return {
      tabData:[
        {
          name:"系统消息",
          click:this.changeTab
        },{
          name:"客户消息",
          click:this.changeTab
        },
      ],

      listData:[
        {
          id:1,
          name:"系统更新",
          info:"8.0版本更新",
          time:"2018-5-20",
          img:"https://bpic.588ku.com/element_pic/00/16/07/285798e2ef40806.jpg",
          num:"20"
        }
      ],

      selectedIndex:0,
      hasmore:false,
    };
  },
  methods: {
    changeTab(item){
      console.log("click---tab--change")
    },

    // 下拉刷新方法回调
    pullup(func){
      console.log("发请求了")

      func()
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.news {
  background-color: #fff;
  .tab-box{
    background-color: #f2f2f2;
    padding-bottom: 5px;
  }

  .title{
    padding: 0 15px;
    font-size: 12px;
    line-height: 30px;
    color: #666;
    border-bottom: 1px solid #DBDBDB;
  }
}
.padding80{
  padding-left: 80px;
  padding-right: 80px;
}
</style>